<template>
  <div>
    <div class="qcp">
      <div class="qq">
        全城
        <i class="iconfont icon-zelvxuanzefeiyongdaosanjiaoxingfandui xsj"></i>
      </div>
      <div class="pp qq">
        品牌
        <i class="iconfont icon-zelvxuanzefeiyongdaosanjiaoxingfandui xsj"></i>
      </div>
      <div class="qq">
        特色
        <i class="iconfont icon-zelvxuanzefeiyongdaosanjiaoxingfandui xsj"></i>
      </div>
    </div>
    <div>
      <div v-html="list" class="list-wrap"></div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "yingyuan",
  data: function () {
    return {
      list: "",
    };
  },
  mounted() {
    axios
      .get(
        "/ajax/moreCinemas?day=2021-07-02&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1625218321377&cityId=30&optimus_uuid=5B9788E0C90111EBB41B954B0C6996101EDBAAEBDA51426DBCEEC849472CEF3E&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        console.log(res);
        this.list = res.data;
      });
  },
};
</script>

<style>
a {
  text-decoration: none;
}
a {
  cursor: pointer;
}
a,
div {
  -webkit-tap-highlight-color: transparent;
}
a,
img {
  display: block;
}
a {
  background-color: transparent;
}
.qcp {
  border-top: 1px solid rgb(221, 217, 217);
  border-bottom: 1px solid rgb(221, 217, 217);
  height: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 30px;
  font-size: 14px;
  color: #777;
  display: flex;
  justify-content: space-around;
}
.xsj {
  font-size: 8px;
}
.pp {
  border-left: 1px solid rgb(221, 217, 217);
  border-right: 1px solid rgb(221, 217, 217);
}
.qq {
  width: 125px;
  text-align: center;
}
.list-wrap .item {
  padding: 13px 15px 13px 0;
  margin-left: 15px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
.list-wrap .title-block {
  display: block;
}
.list-wrap .title-block .title {
  height: 23px;
  line-height: 23px;
  font-size: 16px;
  color: #000;
}
.list-wrap .location-block {
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}
.list-wrap .title-block .label-block {
  height: 17px;
  line-height: 17px;
  margin-top: 4px;
  margin-bottom: 4px;
  overflow: hidden;
  font-size: 0;
  flex-shrink: 0;
}
.discount-block {
  color: #999;
  margin-bottom: 4px;
}
.list-wrap .title-block .title {
  height: 23px;
  line-height: 23px;
  font-size: 16px;
  color: #000;
}
.list-wrap .price-block {
  padding-top: 9px;
  padding-left: 3px;
}

.list-wrap .price-block .price {
  font-size: 18px;
  color: #f03d37;
}
.list-wrap .price-block .q {
  font-size: 11px;
  margin-left: 3px;
  color: #f03d37;
}
.list-wrap .location-block {
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}
.flex {
  -webkit-box-flex: 1;
  flex: 1;
}
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
a,
div {
  -webkit-tap-highlight-color: transparent;
}
.location-block .distance {
  margin-left: 5px;
}
div {
  display: block;
}
.list-wrap .location-block {
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}
.box-flex {
  display: -webkit-box;
  display: flex;
}
.cinema-list .list-wrap .title-block .label-block {
  height: 17px;
  line-height: 17px;
  margin-top: 4px;
  margin-bottom: 4px;
  overflow: hidden;
  font-size: 0;
  flex-shrink: 0;
}
.list-wrap .title-block .label-block > div {
  position: relative;
  display: inline-block;
  padding: 0 3px;
  height: 15px;
  line-height: 15px;
  border-radius: 2px;
  font-size: 12px;
}
.list-wrap .title-block .label-block div.endorse {
  color: #589daf;
  border: 1px solid #589daf;
  margin-left: 5px;
  padding: 0 3px;
}
.list-wrap .title-block .label-block div.endorse {
  color: #589daf;
  border: 1px solid #589daf;
  margin-left: 5px;
  padding: 0 3px;
}
.list-wrap .title-block .label-block div.snack {
  color: #f90;
  border: 1px solid #f90;
}
.list-wrap .title-block .label-block > div {
  position: relative;
  display: inline-block;
  padding: 0 3px;
  height: 15px;
  line-height: 15px;
  border-radius: 2px;
  font-size: 12px;
}
.list-wrap .title-block .label-block > div {
  position: relative;
  display: inline-block;
  padding: 0 3px;
  height: 15px;
  line-height: 15px;
  border-radius: 2px;
  font-size: 12px;
}
.list-wrap .title-block .label-block div.snack {
  color: #f90;
  border: 1px solid #f90;
  margin-left: 5px;
  padding: 0 3px;
}

.list-wrap .title-block .label-block > div {
  position: relative;
  display: inline-block;
  padding: 0 3px;
  height: 15px;
  line-height: 15px;
  border-radius: 2px;
  font-size: 12px;
}

.list-wrap .title-block .label-block div.snack,
.list-wrap .title-block .label-block div.vipTag {
  color: #f90;
  border: 1px solid #f90;
  margin-left: 5px;
  padding: 0 3px;
}
.list-wrap .title-block .label-block div.hallType,
.list-wrap .title-block .label-block div.sell {
  color: #589daf;
  border: 1px solid #589daf;
  margin-left: 5px;
  padding: 0 3px;
}
.list-wrap .title-block .label-block div.allowRefund {
  color: #589daf;
  border: 1px solid #589daf;
}

.discount-block {
  color: #999;
  margin-bottom: 4px;
}
.discount-block .discount-label img {
  width: 15px;
  height: 14px;
}
.discount-label {
  display: inline-block;
  vertical-align: middle;
}
.discount-block .discount-label-text {
  margin-left: 0;
  font-size: 11px;
  width: 5.333333rem;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}
</style>